<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Zookeeper Form</title>
    <link rel="stylesheet" href="ZookeeperForm.css">
    <style>
        .Label {
            display: inline-block;
            width: 125px;
        }
    </style>
</head>
<body>
    <h1>Zoo Keeper Application Form</h1>
    <form action="#" id="zooKeeperForm">
        <p><i>Please complete the form. Mandatory fields are marked with a <em>*</em></i></p>
        <fieldset>
            <legend>What's your favourite animals?</legend>
            <datalist id="animalChoices">
                <span class="Label">Pick an option:</span>
                <select id="favouriteAnimalPreset">
                    <option label="Alpaca" value="alpaca"></option>
                    <option label="Zebra" value="zebra">
                    <option label="Cat" value="cat">
                    <option label="Caribou" value="caribou">
                    <option label="Caterpillar" value="caterpillar">
                    <option label="Anaconda" value="anaconda">
                    <option label="Human" value="human">
                    <option label="Elephant" value="elephant">
                    <option label="Wildebeest" value="wildebeest">
                    <option label="Pigeon" value="pigeon">
                    <option label="Crab" value="crab">
                </select>
                <br>
                <span class="Label">Or type it in:</span>
            </datalist>
            <input type="text" list="animalChoices" id="favouriteAnimal">
        </fieldset>
        <p><input type="submit" value="Submit Application"></p>
    </form>

</body>
</html>